<template>
  <div class="selfCenter">
    <img
      class="img"
      src="https://www.yunliyunwai.cn/_nuxt/img/5de7d75.png"
      alt=""
    />
    <div class="container">
      <div class="selfBox">
        <img
          src="https://portrait.gitee.com/uploads/avatars/user/2868/8604887_liderder_1612145474.png!avatar60"
          alt=""
        />
        <div>
          <!-- <span>{{ this.$store.getters.getUserInfo.userName }}</span> -->
          Liderder
          <br />
          <span style="display: block; margin-top: 20px">{{
            this.$store.getters.getUserInfo.userEmail
          }}</span>
          <br />
          <span style="display: block; margin-top: 20px">
            该用户很懒，还没有设置签名
          </span>
        </div>
      </div>
      <div class="containerBox">
        <!-- 我的收藏、个人中心、我的发布标签切换  开始-->
        <ul class="title_ul">
          <li
            v-for="(item, index) in navList"
            :key="index"
            @click="goPath(item, index)"
            :class="{ active: currentItem === index }"
          >
            {{ item.lable }}
          </li>
        </ul>
        <!-- 我的收藏、个人中心、我的发布标签切换  结束-->
        <div class="li_content">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        { lable: '我的发布', path: '/selfcenter/release' },
        { lable: '收藏题库', path: '/selfcenter/collectquestion' },
        { lable: '收藏面经', path: '/selfcenter/collectarticle' },
        { lable: '我的资料', path: '/selfcenter/editseifinfo' }
      ],
      currentItem: -1
    }
  },
  methods: {
    goPath(item, index) {
      this.currentItem = index
      this.$router.push(item.path)
    }
  },
  watch: {
    '$route.path': {
      handler(toPath, fromPath) {
        const urlList = this.navList.map((item) => item.path)
        if (urlList.includes(toPath)) {
          this.currentItem = urlList.indexOf(toPath)
        } else {
          this.currentItem = -1
        }
      },
      deep: true, // 深度监听
      immediate: true // 第一次初始化渲染就可以监听到
    }
  }
}
</script>

<style lang="scss" scoped>
.selfCenter {
  margin-top: 66px;
  .img {
    width: 100%;
    min-height: 270px;
    background-color: #b9a3d2;
    height: auto;
  }
  .container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    margin-top: -40px;
    .selfBox {
      text-align: center;
      height: 300px;
      width: 302px;
      background-color: #fff;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 0 20px 0;
      img {
        border-radius: 50%;
        width: 84px;
        height: 84px;
        margin-bottom: 30px;
      }
    }
    .containerBox {
      flex: 1;
      margin-left: 10px;
      .title_ul {
        display: flex;
        height: 40px;
        li {
          margin-left: 16px;
          font-size: 14px;
          height: 19px;
          line-height: 19px;
          font-weight: 500;
          color: hsla(0, 0%, 100%, 0.6);
          text-align: center;
          cursor: pointer;
          padding-bottom: 6px;
        }
        .active {
          border-bottom: 2px solid #00aae6;
        }
      }
    }
  }
}
</style>